<!DOCTYPE html>
<html>
<head>
    <title>庆余年</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.js"></script>
</head>

<body>
<div style="padding: 30px;text-align: center;">
    <input placeholder="请输入起始节点名"  style="height: 40px;width: 300px;border-radius: 12px;margin-right: 20px;" id="startName">
    <span>--</span>
    <input placeholder="请输入结束节点名"  style="height: 40px;width: 300px;border-radius: 12px;margin-left: 20px;margin-right: 30px;" id="endName">
    <button style="height: 40px;width: 100px;border-radius: 12px;background-color: #1AE6E6;cursor: pointer" onclick="getStartSearch()">搜索</button>
</div>
<div >
    <div id="main" style="min-width:1000px;min-height:800px;text-align: center;"></div>
</div>
<script type="text/javascript">

    getStartSearch();

    function getStartSearch() {
        let startName = $("#startName").val();
        let endName = $("#endName").val();
        let isShortPath = $("input[type='checkbox']").is(':checked');
        var myChart = echarts.init(document.getElementById('main'));
        let url = '/demo/findAll';

        url = url + "?startName=" + startName + "&endName=" + endName + "&isShortPath=" + isShortPath;
        $.ajax({
            type:"get",
            url:url,
            dataType:"json",
            success: function(data){
                console.log(data);


                option = {
                    // 图的标题
                    title: {
                        text: '庆余年'
                    },
                    // 提示框的配置
                    tooltip: {
                        formatter: function (x) {
                            return x.data.des;
                        }
                    },
                    // 工具箱
                    toolbox: {
                        // 显示工具箱
                        show: true,
                        feature: {
                            mark: {
                                show: true
                            },
                            // 还原
                            restore: {
                                show: true
                            },
                            // 保存为图片
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
                    series: [{
                        type: 'graph', // 类型:关系图
                        layout: 'force', //图的布局，类型为力导图
                        symbolSize: 40, // 调整节点的大小
                        roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                        edgeSymbol: ['circle', 'arrow'],
                        edgeSymbolSize: [2, 10],
                        edgeLabel: {
                            normal: {
                                textStyle: {
                                    fontSize: 20
                                }
                            }
                        },
                        force: {
                            repulsion: 2500,
                            edgeLength: [10, 50]
                        },
                        draggable: true,
                        lineStyle: {
                            normal: {
                                width: 2,
                                color: '#4b565b',
                            }
                        },
                        edgeLabel: {
                            normal: {
                                show: true,
                                formatter: function (x) {
                                    return x.data.name;
                                }
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                textStyle: {}
                            }
                        },

                        // 数据
                        data: data.data.data,
                        links: data.data.links,
                    }]
                };
                myChart.setOption(option);


            }
        });
    }


</script>
</body>
</html>